<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Lee
  Date: 2019/2/24
  Time: 20:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>backend</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css"/>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/userSetting.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/zshop.css">

    <script>

        $(function () {

            $('#pagination').bootstrapPaginator(
                {
                    bootstrapMajorVersion:3,
                    currentPage : ${pageInfo.pageNum},
                    totalPages : ${pageInfo.pages},
                    // alignment : 'center',
                    onPageClicked : function(event, originalEvent, type, page){
                        $("#pageNum").val(page);
                        $("#customerQueryForm").submit();
                    },
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "末页";
                            case "page":
                                return page;
                        }
                    }
                }
            );

        });

        function modifyCustomerStatus(id,element) {

            layer.alert(
                "确定修改状态吗？",
                {
                    skin: 'layui-layer-molv', //样式类名
                    closeBtn: 0
                },
                function () {
                    $.post(
                        '${pageContext.request.contextPath}/backend/customer/updateStatus',
                        {'id' : id},
                        function (result) {
                            if (result.status === 1){
                                layer.msg(
                                    "状态已经修改",
                                    {time : 1000},
                                    function () {
                                        const $valid = $(element).parent().parent().children().eq(5);
                                        if ($.trim($valid.text()) === '有效') {
                                            element.value = '启用';
                                            $(element).removeClass("btn-danger").addClass("btn-success");
                                           $valid.text("无效")
                                       } else {
                                            element.value = '禁用';
                                            $(element).removeClass("btn-success").addClass("btn-danger");
                                            $valid.text("有效")
                                        }

                                    }
                                );
                            }
                        }
                    );
                }

            );
        }

        function modifyCustomer(id) {
            $.post(
                "${pageContext.request.contextPath}/backend/customer/getCustomerById",
                {"id" : id},
                function (result) {
                    if (result.status === 1) {
                        $("#id").val(result.data.id);
                        $("#name").val(result.data.name);
                        $("#loginName").val(result.data.loginName);
                        $("#address").val(result.data.address);
                        $("#phone").val(result.data.phone);
                    }
                }
            );
        }

    </script>

</head>
<body>
<div class="panel panel-default" id="userInfo" id="homeSet">
    <div class="panel-heading">
        <h3 class="panel-title">客户管理</h3>
    </div>
    <div class="panel-body">
        <div class="showusersearch">
            <form class="form-inline" method="post" id="customerQueryForm" action="${pageContext.request.contextPath}/backend/customer/findByParam">
                <input type="hidden" name="pageNum" id="pageNum">
                <div class="form-group">
                    <label for="customer_name">姓名:</label>
                    <input type="text" class="form-control"id="customer_name" name="name" value="${customerParam.name}" placeholder="请输入姓名" size="15px">
                </div>
                <div class="form-group">
                    <label for="customer_loginName">帐号:</label>
                    <input type="text" class="form-control" id="customer_loginName" name="loginName" value="${customerParam.loginName}" placeholder="请输入帐号" size="15px">
                </div>
                <div class="form-group">
                    <label for="customer_phone">电话:</label>
                    <input type="text" class="form-control" id="customer_phone" name="phone" value="${customerParam.phone}" placeholder="请输入电话" size="15px">
                </div>
                <div class="form-group">
                    <label for="customer_address">地址:</label>
                    <input type="text" class="form-control" id="customer_address" name="address" value="${customerParam.address}" placeholder="请输入地址">
                </div>
                <div class="form-group">
                    <label for="customer_isValid">状态:</label>
                    <select class="form-control" id="customer_isValid" name="valid">
                        <option value="-1">全部</option>
                        <option value="1" <c:if test="${customerParam.valid == 1}">selected</c:if>>---有效---</option>
                        <option value="0" <c:if test="${customerParam.valid == 0}">selected</c:if>>---无效---</option>
                    </select>
                </div>
                <input type="submit" value="查询" class="btn btn-primary" id="doSearch">
            </form>
        </div>

        <div class="show-list" style="position: relative;top: 30px;">
            <table class="table table-bordered table-hover" style='text-align: center;'>
                <thead>
                <tr class="text-danger">
                    <th class="text-center">序号</th>
                    <th class="text-center">姓名</th>
                    <th class="text-center">帐号</th>
                    <th class="text-center">电话</th>
                    <th class="text-center">地址</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <c:forEach items="${pageInfo.list}" var="customer">
                    <tr>
                        <td>${customer.id}</td>
                        <td>${customer.name}</td>
                        <td>${customer.loginName}</td>
                        <td>${customer.phone}</td>
                        <td>${customer.address}</td>
                        <td>
                            <c:if test="${customer.valid == 0}">无效</c:if>
                            <c:if test="${customer.valid == 1}">有效</c:if>
                        </td>
                        <td class="text-center">
                            <input type="button" class="btn btn-warning btn-sm doModify" onclick="modifyCustomer(${customer.id})" value="修改">
                            <c:if test="${customer.valid == 0}">
                                <input type="button" id="is-valid" class="btn btn-success btn-sm doDisable" onclick="modifyCustomerStatus(${customer.id},this)" value="启用">
                            </c:if>
                            <c:if test="${customer.valid == 1}">
                                <input type="button" id="is-valid" class="btn btn-danger btn-sm doDisable" onclick="modifyCustomerStatus(${customer.id},this)" value="禁用">
                            </c:if>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <div style="text-align: center">
                <ul id="pagination"></ul>
            </div>
        </div>
    </div>
</div>

<!-- 修改客户信息 start -->
<div class="modal fade" tabindex="-1" id="myModal">
    <!-- 窗口声明 -->
    <div class="modal-dialog">
        <!-- 内容声明 -->
        <form method="post" action="${pageContext.request.contextPath}/backend/customer/updateCustomer" id="updateCustomerForm">
            <div class="modal-content">
                <!-- 头部、主体、脚注 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">修改客户</h4>
                </div>
                <div class="modal-body text-center">
                    <div class="row text-right">
                        <label for="id" class="col-sm-4 control-label">编号：</label>
                        <div class="col-sm-4">
                            <input type="hidden" name="id">
                            <input type="text" class="form-control" id="id" disabled>
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="name" class="col-sm-4 control-label">姓名：</label>
                        <div class="col-sm-4">
                            <input type="hidden" name="name">
                            <input type="text" class="form-control" id="name" disabled>
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="loginName" class="col-sm-4 control-label">帐号：</label>
                        <div class="col-sm-4">
                            <input type="hidden" name="loginName">
                            <input type="text" class="form-control" id="loginName" disabled>
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="phone" class="col-sm-4 control-label">电话：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="phone">
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="address" class="col-sm-4 control-label">地址：</label>
                        <div class="col-sm-4">
                            <input type="email" class="form-control" id="address" name="address">
                        </div>
                    </div>
                    <br>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary updateOne" onclick="updateCustomer()">修改</button>
                    <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                </div>
            </div>
        </form>
    </div>
</div>
<!-- 修改客户信息 end -->
</body>

</html>